<template>
	<view>
		<u-navbar back-text="发现" :customBack="back" backIconName=" " :backTextStyle="backTextColor"
			backIconColor="#39CCCC" :background="background">
			<view class="search-wrap" @click="toSearch">
				<u-search height="56" :showAction="false"></u-search>
			</view>
			<view class="navbar-right" slot="right">
				<view class="right-item">
					<u-icon name="chat" size="38"></u-icon>
					<u-badge count="18" size="mini" :offset="[-15, -15]"></u-badge>
				</view>
				<view class="right-item">
					<u-icon name="setting" size="38" @click="open"></u-icon>
				</view>
			</view>
		</u-navbar>
		<u-modal v-model="show" title=" " confirm-text="关闭">
			<view class="u-p-30">
				<view class="u-flex u-row-center">
					<view class="u-m-r-10">预览模式</view>
					<u-switch v-model="vertical" @change="switchchange" size="38"></u-switch>
				</view>
				<view class="u-font-xs u-text-center u-tips-color u-p-t-20">
					开启为上下滑模式，关闭为左右滑动模式
				</view>
			</view>
		</u-modal>
		
		<!-- swiper -->
		<view class="home u-p-b-0">
			<!-- <u-swiper :vertical="false" :list="swiperlist"></u-swiper> -->
			<view class="u-p-t-20">
				<u-grid :col="4" :border="false">
					<u-grid-item v-for="(item,index) in categoryList" :key="index" @click="toList(item)">
						<u-image :src="item.image" width="100" height="100" ></u-image>
						<view class="grid-text">{{item.name}}</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<u-divider color="#fa3534" half-width="100%">联网设备</u-divider>
		<view>
		    <u-swipe-action :show="item.show" :index="index" v-for="(item, index) in list"
		      :key="item.id" @click="click" @open="open" @content-click="contentClick" :options="options" >
		      <view class="item u-border-bottom">
		        <image mode="aspectFill" :src="item.images" />
		        <!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
		        <view class="title-wrap">
		          <!-- <text class="title">{{ item.title }}</text>
		          <text class="time">{{ item.time }}</text>
		          <text class="text">{{ item.text }}</text> -->
				  <u-row gutter="0">
					<u-col span="8">
						<text class="title">{{ item.title }}</text>
					</u-col>
					<!-- 在 time 所在的 u-col 上添加 class -->
					<u-col span="4" class="time-col">
					  <text class="time">{{ item.time }}</text>
					</u-col>
				  </u-row>
				  <u-row gutter="0">
					  <u-col span="11">
					  	<text class="text" :style="{ 'font-size': getSize(item.text),color: getColor(item.text) }">{{ item.text }}</text>
					  </u-col>
				  </u-row>
		        </view>
		      </view>
		    </u-swipe-action>
		</view>
	</view>
</template>

<script>
	// import bottomRight from '@/components/bottomRight.vue';
	import config from '../../uview-ui/libs/config/config';
	export default {
		components: {
			// bottomRight
		},
		data() {
			return {
				height: '',
				vertical: true,
				background: this.TopColor,
				backTextColor: {
					'color': '#ffffff'
				},
				show:false,
				current: 0,
				categoryList: [{
					name: '最新',
					image: '/static/new.png',
					url: '/pages/blink/index'
				}, {
					name: '票据',
					image: '/static/piaoju.png',
					url: '/pages/index/camera'
				}, {
					name: '开仓',
					image: '/static/yuechi.png',
					url: '/pages/blink/open_house'
				}, {
					name: '结存',
					image: '/static/jiecun.png',
					url: '/pages/blink/balance'
				}],
				list: [],
				renderKey: 0,
				disabled: false,
				btnWidth: 180,
				show: false,
				options: [
				  {
					text: "收藏",
					style: {
					  backgroundColor: "#007aff",
					},
				  },
				  {
					text: "删除",
					style: {
					  backgroundColor: "#dd524d",
					},
				  },
				],
			}
		},
		onLoad() {
			let system = uni.getSystemInfoSync();
			let height = (system.windowHeight - system.statusBarHeight - 44);
			let rpx = height / (uni.upx2px(100) / 100);
			this.height = parseInt(rpx);
			//this.apiblibk()
		},
		onShow(){
			this.apiMyDeviceList();	
		},
		methods: {
			back() {// 首页
				uni.navigateBack({
					delta: 2
				})
			},
			extractNumbers(str) {
			  return str.match(/\d+/g).map(Number);
			},
			getSize(value) {
				if(value.indexOf("℃") >= 0){
					  return "36rpx";
				}else{
					return "28rpx";
				}
			},
			getColor(value) {
			   let tmp = "";
			  console.log("value: color: ",value);
			  // 根据value的值返回不同的颜色
			  if(value.indexOf("℃") > 0){
				  tmp = this.extractNumbers(value)[0];
				  console.log("tmp: ",tmp);
			  }
			  if(tmp > 0 && tmp < 70){
			  		return "#5592f9"
			  }else if (tmp >= 70 && tmp < 150) {
			  		return "#1f00f9"
			  } else if(tmp >= 150 && tmp < 550){
			  		return "#fb8218"
			  } else if(tmp >= 550){
			  		return "#fa3534"
			  } else {
			  		return ""
			  }
			  
			},
			toList(item){
				if(item.name == "最新"){
					this.apiMyDeviceList();
				}else if(item.name == "票据"){
					console.log("票据name:",item.name, item.url);
					
					// 在需要跳转的页面
					const app = getApp();
					app.globalData.tabParams = {
					  cameraType: 'piaoju', // 自定义参数
					  link_URL: '/finan/newFinanCashUnknow.action', // 
					};

					uni.switchTab({
						url:item.url
					});
					
				}else{
					console.log("name:",item.name, item.url);
					this.$common.navigateTo(item.url);
				}
			},
			async apiMyDeviceList(){
				this.list = [];
				await this.$api.post("/kim/toMyDevicePage.action",{}).then(res => {
					//console.log("deviceList:",res);
					if(res.code == 0 && res.recordsFiltered > 0){
						res.data.forEach((vm,index) => {
							let img_src = vm.deviceImgPkgID;
							console.log("img:",vm)
							let text = "";
							let time = "";
							let textName = "";
							let deviceList = [];
							img_src = img_src.replace("../images/","../../static/");
							if(vm.deviceType == "oven"){
								//textName = "温度";
								text = JSON.parse(vm.deviceRunningJson)["温度"]+" ℃";
								time = JSON.parse(vm.deviceRunningJson)["时间"];
							}else if(vm.deviceType == "feng"){
								let obj = JSON.parse(vm.deviceRunningJson);
								text = "状态：" + obj["状态"];
								time = JSON.parse(vm.deviceRunningJson)["时间"];
							}else if(vm.deviceType == "ups"){
								let obj = JSON.parse(vm.deviceRunningJson);
								text = "电压："+ obj["电压"]+"V" + "  电流："+ obj["电流"]+"A"+"\n功率："+ obj["功率"]+"W"+"  电量："+ obj["电量"]+"%";
								time = JSON.parse(vm.deviceRunningJson)["时间"];
							}else if(vm.deviceType == "peng"){
								let obj = JSON.parse(vm.deviceRunningJson);
								text = "小棚："+ obj["小棚状态"]+" "+ obj["小棚展开"] + "\n大棚："+ obj["大棚状态"] +" "+obj["大棚展开"];
								time = JSON.parse(vm.deviceRunningJson)["时间"];
								deviceList.push({
									name: "小棚",
									status: obj["小棚状态"],
									open: obj["小棚展开"]
								});
								deviceList.push({
									name: "大棚",
									status: obj["大棚状态"],
									open: obj["大棚展开"]
								})
							}
							this.list.push({
								id: vm.id,
								title: vm.deviceName,
								images: img_src,
								text: text,
								time: this.$common.dateToRelativeTime(time),
								textName: textName,
								deviceType: vm.deviceType,
								deviceList: JSON.stringify(deviceList)
							})
						});
						
					}
				});
				this.renderKey += 1;
			},
			contentClick(index,index1){
				console.log("content_click:",index);
				let itm = this.list[index];
				if(itm.deviceType == 'peng'){
					this.$common.navigateTo("/pages/blink/peng?id="+itm.id+"&title="+itm.title+"&type="+itm.deviceType+"&deviceList="+itm.deviceList);
				}else{
					this.$common.navigateTo("/pages/blink/feng_led?id="+itm.id+"&title="+itm.title+"&type="+itm.deviceType+"&deviceList="+itm.deviceList);
				}
				
			},
			click(index, index1) {
				if (index1 == 1) {
				  this.list.splice(index, 1);
				  this.$u.toast(`删除了第${index}个cell`);
				} else {
				  this.list[index].show = false;
				  this.$u.toast(`收藏成功`);
				}
			},
			  // 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.list[index].show = true;
				this.list.map((val, idx) => {
				  if (index != idx) this.list[idx].show = false;
				});
			},
			switchchange(e){
				//this.vertical = e;
			},
			toSearch() {
				this.$common.navigateTo('/pages/index/search')
			},
			appShare() {
				console.log('分享')
			}
		}
	}
</script>

<style lang="scss">
	
	.item {
	   display: flex;
	   padding: 20rpx;
	 }
	 
	/* 确保整个 item 容器无多余间距 */
	.item .title-wrap {
	  width: 100%; /* 占满 item 宽度 */
	  padding: 0 !important; /* 清除可能的内边距 */
	}
	
	.swiper {
		height: 100%;
	}

	.search-wrap {
		margin: 0 30rpx 0 10rpx;
		flex: 1;
	}

	.warp {
		display: flex;
		float: right;
		align-items: center;
		justify-content: center;
		height: 100%;
		margin-right: 100rpx;
	}
	 
	
	  image {
	    width: 120rpx;
	    flex: 0 0 120rpx;
	    height: 120rpx;
	    margin-right: 20rpx;
	    border-radius: 12rpx;
	  }
	
	  .title {
	    display:flex;
	    justify-content: left;
	    font-size: 36rpx;
		font-weight: bold;
	    color: $u-content-color;
	    margin-top: 0rpx;
		width: 300rpx;
	  }
	  .text{
		  text-align: left;
		  color: $u-content-color;
		  margin-top: 0rpx;
		  font-size: 28rpx;
	  }
	 
	  
	  /* 父容器：确保占满宽度，为子元素对齐提供基础 */
	  .time-col {
	    width: 100%; /* 占满 u-col 分配的 6 份宽度 */
	    display: flex; /* 使用 flex 布局增强对齐效果 */
	    justify-content: flex-end; /* 子元素靠右侧排列 */
	  }
	  
	  /* 时间文本样式：完全靠右，无间距 */
	  .time {
	    color: $u-content-color;
	    text-align: right; /* 文本内容靠右 */
	    display: block; /* 转为块级元素，占满父容器宽度 */
	    width: 100%; /* 确保文本框占满列宽 */
	    margin: 0; /* 清除默认外边距 */
	    padding: 0; /* 清除默认内边距 */
	  }
	  
	  
</style>
